<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的生命周期实验</title>
    <script type="text/javascript" src="/static/js/vue/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{ title }}</h1>
    <button @click="randomTitle()">改变title</button>
    <button @click="destroyVm()">销毁实例</button>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data() {
            return {
                title: "hello world"
            }
        },
        methods: {
            randomTitle: function () {
                this.title = "hello " + ['china', 'universe', 'world'][Math.floor(Math.random() * 2.999)];
            },
            // 该方法执行后, 会销毁vue实例, randomTitle方法改变了vue实例的title值就无法同步到dom中了.
            destroyVm: function () {
                this.$destroy();
            }
        },
        // 该方法会在vue实例初始化时执行
        beforeCreate: function () {
            console.log("before create");
        },
        // 初始化执行完毕执行的方法
        created: function () {
            console.log("created");
        },
        // 在这个方法之前会判断el是否存在, 存在就把对应的模板编译为渲染函数, 不存在就把父级dom节点编译为模板.
        beforeMount: function () {
            console.log("before mount");
        },
        // 创建虚拟节点, 并用它替换真是dow节点
        mounted: function () {
            console.log("mounted");
        },
        // 当数据发生改变时触发的方法
        beforeUpdate: function () {
            console.log("before update");
        },
        // 数据改变完成之后并且重新挂载到dom上之后执行的方法
        updated: function () {
            console.log("updated");
        },
        // vue实例销毁前执行的方法
        beforeDestroy: function () {
            console.log("before destroy")
        },
        // vue实例销毁后执行的方法
        destroyed: function () {
            console.log("destroyed")
        }
    });
</script>
</body>
</html>